<template>
<el-dialog
  class="YForm"
  :class="{'force-inner-scroll': forceInnerScroll}"
  v-bind="vBind"
  v-on="$listeners">
  <slot name="y-form-tip"></slot>
  <el-form :model="value" v-bind="formAttrs" ref="form" @submit.native.prevent>
    <template v-for="(column, index) in columns">
      <el-form-item
        :key="`col_${index}`"
        class="y-form-item"
        v-if="column.vIf === undefined ? true : !!column.vIf"
        v-bind="column">
        <slot :name="column.prop" v-if="!!column.template"></slot>
        <component
          v-else
          :is="column.comp.compType.startsWith('Y') ? column.comp.compType : `el-${column.comp.compType}`"
          v-model="value[column.prop]"
          v-bind="column.comp.attrs"
          v-on="column.comp.listeners">
          <template v-if="column.comp.compType === 'select' && column.comp.options">
            <el-option
              v-for="item in column.comp.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"></el-option>
          </template>
        </component>
      </el-form-item>
    </template>
  </el-form>
  <slot name="footer" slot="footer" v-if="showButton">
    <div class="dialog-footer">
      <el-button @click="hideYForm">取 消</el-button>
      <template v-if="!ensureTips">
        <el-button type="primary" @click="ensureYForm">确 认</el-button>
      </template>
      <template v-else>
        <el-popconfirm
          :title="ensureTips"
          @confirm="ensureYForm">
          <el-button type="primary" slot="reference" style="margin-left: 10px;">确 认</el-button>
        </el-popconfirm>
      </template>
    </div>
  </slot>
</el-dialog>
</template>

<script>
export default {
  name: "YForm",
  model: {
    prop: 'value',
    event: 'change'
  },
  computed:{
    vBind(){
      let obj = {};
      if(this.forceInnerScroll){
        Object.assign(obj, this.$attrs, {
          top: 'unset',
          customClass: this.$attrs.customClass ? this.$attrs.customClass + ' y-inner-scroll' : 'y-inner-scroll'
        });
      }else{
        Object.assign(obj, this.$attrs);
      }
      obj.closeOnClickModal = this.$attrs.closeOnClickModal || false;
      return obj;
    }
  },
  props: {
    value: Object,
    formAttrs: Object,
    columns: Array,
    ensureTips: String,
    forceInnerScroll: {
      type: Boolean,
      default: false
    },
    showButton: {
      type: Boolean,
      default: true
    }
  },
  methods:{
    hideYForm(){
      this.$emit('update:visible', false);
    },
    updateYForm(){
      this.$emit('ensure', { ...this.value });
    },
    validate(){
      this.$refs['form'].validate();
    },
    ensureYForm(){
      this.$refs['form'].validate(valid => {
        if(valid){
          this.$nextTick(() => {
            this.$bus.$once('close-dialog', close => {
              close && this.hideYForm();
            })
            this.updateYForm();
          })
        }
      });
    }
  },
  watch:{
    'vBind.visible'(val){
      this.$nextTick(() => {
        this.$refs['form'] && this.$refs['form'].clearValidate && this.$refs['form'].clearValidate();
      })
    }
  }
}
</script>

<style scoped lang="less">
.YForm{
  /deep/ .y-form-item{
    .el-form-item__label:after{
      content: ':';
    }
  }
}

</style>